<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>文件管理</title>
		<link rel="icon" th:href="${config.SITE_ICON}">
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/bootstrap.min.css'}"/>
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/iconfont/iconfont.css'}"/>
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/app.css'}"/>
		<style>
			.table-file img{
				max-height: 120px;
				max-width: 200px;
			}
		</style>
	</head>
	<body>
		<div class="z-content">
			<div class="z-card">
                <div class="z-card-body z-card-body-tight">
                    <form id="formSearch" class="form-horizontal form-search">
						<div class="form-group col-md-4 col-sm-6">
							<label class="control-label  col-xs-4" for="key">文件关键字:</label>
							<div class="col-xs-8">
								<input type="text" class="form-control" id="key" placeholder="原文件名/文件路径">
							</div>
						</div>
						<div class="form-group col-md-3 col-sm-6">
							<label class="control-label  col-xs-4">云存储:</label>
							<div class="col-xs-8">
								<select id="ossType" class="form-control">
									<option value="">请选择</option>
									<option value="0">本地</option>
									<option value="1">七牛云</option>
									<option value="2">阿里云</option>
									<option value="3">腾讯云</option>
								</select>
							</div>
						</div>
						<div class="form-group col-md-1 col-sm-6 text-left">
							<button type="button" id="btn_query" class="btn btn-primary">查询</button>
						</div>
					</form>
				</div>
			</div>
            <div class="z-card">
                <div class="z-card-body">
					<div class="btn-group z-table-btn-group" role="group">
						<button id="btn_add" type="button" class="btn btn-primary">上传</button>
						<button id="btn_batch_delete" type="button" class="btn btn-danger">批量删除</button>
					</div>
                    <table id="table" data-url="/admin/file/list" data-query-params="queryParams" data-key="id" data-response-handler="responseHandler">
                        <thead>
                            <tr>
                                <th data-checkbox="true"></th>
								<th data-field="fileFullPath" data-formatter="formatFile" data-align="center">文件</th>
                                <th data-field="originalName">原文件名</th>
                                <th data-field="fileFullPath">文件地址</th>
								<th data-field="ossType" data-formatter="formatOssType" data-align="center">云存储</th>
								<th data-field="fileType">文件类型</th>
								<th data-field="fileSize">文件大小</th>
                                <th data-field="id" data-formatter="formatOpt" data-align="center" data-width="80">操作</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
		</div>
		<script th:src="${config.SITE_CDN+'/static/js/jquery.min.js'}"></script>
		<script th:src="${config.SITE_CDN+'/static/js/bootstrap.min.js'}"></script>
		<script th:src="${config.SITE_CDN+'/static/js/app.js'}"></script>
        <script>
            $(function () {
                App.initSelect("select");
                App.initTable("#table");
				App.initUploader({
					pick: '#btn_add',
					url:'/upload/upload',
					before:function(){
						App.mask("#btn_add");
					},
					onSuccess:function(picker,res){
						App.unmask("#btn_add");
						if(res.status===200){
							App.msgS("上传成功");
							App.refreshTable("#table");
						}else{
							App.msgE(res.msg);
						}
					}
				});

				$("#btn_query").on('click', function(){
					App.refreshTable("#table");
				});

				$("#btn_batch_delete").on('click', function(){
					var checkedRows= App.getTableSelections("#table");
					if(checkedRows.length>0){
						App.confirm({content: "确定删除选中的"+checkedRows.length+"条记录？"},function () {
							var ids=[];
							$.each(checkedRows, function (i, item) {
								ids.push(item.id);
							});
							App.postAjax("/admin/file/delete", {"ids": ids}, function (data) {
								if (data.status === 200) {
									App.refreshTable("#table");
								}
								App.msgS(data.msg);
							})
						})
					}else{
						App.msgE("请选择至少一条记录");
					}
				});
            });

            function  queryParams() {
                return {
                    key: $("#key").val(),
                    ossType: $("#ossType").val()
                }
            }

            function responseHandler(data){
                return data.data;
			}

            function formatFile(index,value) {
                var $fileWrapper = $('<span class="table-file"></span>');
                App.echoFile($fileWrapper,value);
                return $fileWrapper;
            }

            function formatOssType(index,value) {
                var ossType = "";
                if(value===0){
                    ossType="本地";
				}else if(value===1){
                    ossType="七牛云";
                }else if(value===2){
                    ossType="阿里云";
                }else if(value===3){
                    ossType="腾讯云";
                }
                return ossType;
            }

            function formatOpt(index,value){
                return '<a class="btn btn-xs btn-outline-danger" onclick="deleteFile('+value+')">删除</a>';
            }

            function deleteFile(value) {
				App.confirm({content: "确定删除?"},function () {
					App.postAjax("/admin/file/delete", {"ids": [value]}, function (data) {
						if (data.status === 200) {
							App.refreshTable("#table");
						}
						App.msgS(data.msg);
					})
				})
            }

        </script>

	</body>
</html>
